{%extends "base.html"%}
{%block body%}
<script type="text/javascript" src="/static/json2.js"></script>

<script type="text/javascript" src="/static/tmapsroutemaker.js"></script>

<script language="JavaScript1.2"> 

// if this is a new route the variables will be initialized as follows (before this page is displayed):
// routeName='new', owner=user, state='USA', typeTrail='other', parking='[]', restrooms='[]', leftLinks='[]', comments='')

// globalNode = -1 tells the map that the route is being edited.  globalNode = 0 or higher means the way is being edited.
// globalNode = -2 means parking is being edited.  globalNode = -3 means the Public restrooms is being edited
   

	var globalNode = -1;
	var parkingObj = {{ route.parking }} ;
	var restroomsObj = {{ route.restrooms }};
 	var leftLinksObj = {{ route.leftLinks }};
	var saved = true;



function showDiv(showstring) {
 	document.getElementById(showstring).style.visibility = "visible";
}
function hideDiv(showstring) {
 	document.getElementById(showstring).style.visibility = "hidden";
}


function validate() {
	//make sure geoPoint is set
	if  ( document.getElementById('id_routeName').value == 'new' ) {
		alert("Please name this route before saving.");
		return;
	}
	if (  document.getElementById('id_longitude').value == '-96.0' ) {
		alert("Please click on the map to locate the position of this route before saving");
	} else {
		var x=document.getElementById("frmRouteData");
		x.submit()
	}
}





function dirtyLink() {
   	//user has entered the link box so make the post button visible

 	document.getElementById('btnSaveLinks').style.visibility = "visible";
}

function unload() {
	
 	if ( saved != true ) {
		if (confirm("Do you want to save changes before leaving this page? "))  saveway();
	}
}


function startUP() {
	
	llon = {{ route.longitude }};
	llat = {{ route.latitude }};
	lzoom = {{ route.zoom }};
	mapLoader(llat, llon, 4);
	saved = true;
        globalNode = -1;
}


</script>


</head>

<body onload="startUP()" link="white" vlink="white" alink="red"  display: inline;>

<div id="appFrame">

{% include "title.html" %}

<div id="leftImages">
	<h2>Create or Edit Route </h2> 
	<a href= "/gethandle"  >  </a>  </p>

	<div class="imgdata" id="d0">
	   
		<p style="color:white">ROUTE EDITOR</p>

<form action="routeNewUpdate/"  method="post" id="frmRouteData">

<div id = "nodepad" class="invisiForm" >
STEP 1. Provide information to help other people find and use your route (scroll down as needed):
<table width=100%>
<tr><td width=45%>
				<label for="id_routeName"> Title: </label> <br>
				{{routeform.routeName }} </td>
<td width=8% > <img src="/static/icons/help.gif"  height=17 width=17  onclick="hideDiv('help_routeName'); return false;" onmouseover="showDiv('help_routeName'); return false;" > </td><td width=47%>
<div id="help_routeName"  class="helpnote"> Enter a name for this route </div></td></tr>




				<tr><td><label for="id_author"> Contributor: </label> <br>
				{{routeform.author }}</td>
<td> <img src="/static/icons/help.gif"   height=17 width=17  onclick="hideDiv('help_author'); return false;" onmouseover="showDiv('help_author'); return false;" > </td><td>
<div id="help_author"  class="helpnote"> Enter your name or organization </div></td></tr>




				<tr><td ><label for="id_latitude"> Latitude: </label> <br>
				{{routeform.latitude }} <br>
				<label for="id_longitude"> Longitude: </label> <br>
				{{routeform.longitude }} </td>
<td> <img src="/static/icons/help.gif"   height=17 width=17  onclick="hideDiv('help_geos'); return false;" onmouseover="showDiv('help_geos'); return false;" > </td><td>
<div id="help_geos"  class="helpnote"> Click on the Google map to set these values. </div></td></tr>

<tr><td>	<label for="id_intro"> Overall Description: </label> <br>
				{{routeform.intro }}</td>
<td> <img src="/static/icons/help.gif"   height=17 width=17  onclick="hideDiv('help_intro'); return false;" onmouseover="showDiv('help_intro'); return false;"> </td><td>
<div id="help_intro"  class="helpnote"> Description of trail and environment of this route. </div></td></tr>


			<tr><td><label for="id_zoom"> Zoom Level: </label> <br>
				{{routeform.zoom }} </td>
<td> <img src="/static/icons/help.gif"   height=17 width=17  onclick="hideDiv('help_zoom'); return false;" onmouseover="showDiv('help_zoom'); return false;" > </td><td>
<div id="help_zoom"  class="helpnote"> Recommeded level of a 15 level google map zoom.  Change it here if desired. </div></td></tr>


				<tr><td><label for="id_state"> State/Country: </label> <br>
				 {{routeform.state }}</td>
<td> <img src="/static/icons/help.gif"   height=17 width=17  onclick="hideDiv('help_state'); return false;" onmouseover="showDiv('help_state'); return false;" > </td><td>
<div id="help_state"  class="helpnote"> The state, country or continent where the trail begins. </div></td></tr>



			<tr><td><label for="id_locationName"> Location: </label> <br>
				{{routeform.locationName }}</td>
<td> <img src="/static/icons/help.gif"   height=17 width=17  onclick="hideDiv('help_locationName'); return false;" onmouseover="showDiv('help_locationName'); return false;" > </td><td>
<div id="help_locationName"  class="helpnote"> The closest city, park or region.</div></td></tr>


				<tr><td><label for="id_typeTrail"> Type of Trail: </label> <br>
				{{routeform.typeTrail}}</td>
<td> <img src="/static/icons/help.gif"   height=17 width=17  onclick="hideDiv('help_typeTrail'); return false;" onmouseover="showDiv('help_typeTrail'); return false;"> </td><td>
<div id="help_typeTrail"  class="helpnote"> Surface, use or purpose of trail.</div></td></tr>


				<tr><td><label for="id_organization"> Additional: </label> <br>
				 {{ routeform.organization }} </td>
<td> <img src="/static/icons/help.gif"   height=17 width=17  onclick="hideDiv('help_organization'); return false;" onmouseover="showDiv('help_organization'); return false;" > </td><td>
<div id="help_organization"  class="helpnote"> Enter the search key you want to use for this route, the organization that maintains this area, and links to guides or helpful information for users.  The first line shows in search. </div></td></tr>


				<tr><td><label for="id_img"> Cover Image: </label> <br>
				{{routeform.img }}</td>

<td> <img src="/static/icons/help.gif"   height=17 width=17  onclick="hideDiv('help_img'); return false;" onmouseover="showDiv('help_img'); return false;" > </td><td>
<div id="help_img"  class="helpnote">This will be automatically filled in if left blank </div></td></tr>
</table>
</div>

		STEP 2. Press button to save route. <button type="button" class="nav" name="updateroute" onClick="validate()" > Save </button>
		 <input type = "hidden" name="ways" value = "{{route.way }}" />
		<img src="{{ route.imageURL }}?imgmax=512" alt="{{route.routeName}}"  />
		<br><hr>
</form>

	
       </div>
  

</div> 

{% include "builderMap.html" %}
	
</div>
</body>

{%endblock%}

